<template>
  <!-- 视频滚动 -->
  <view class="page-wrapper">
    <NvRoll @change="onchange" :num="list.length" :style="{ height: windowHeight + 'px' }">
      <cell
        v-for="(item, index) in list"
        :key="index"
        :data-index="index"
        :recycle="false"
        class="list-item"
        :style="{ height: windowHeight + 'px' }"
      >
        <!-- 背景图片 -->
        <image
          class="bg-image"
          :lazy-load="true"
          :fade-show="false"
          :src="item.cover"
          mode="cover"
          :style="{ height: windowHeight + 'px' }"
        ></image>
        <!-- 视频组件 -->
        <view class="video-box">
          <video
            ref="mVideo"
            class="mVideo"
            id="mVideo"
            v-if="current === index"
            :src="currentUrl.url"
            :controls="true"
            loop
            :autoplay="actived"
            @play="onplay"
          >
          </video>
        </view>

        <!-- 视频信息 -->
        <view class="video-info-box">
          <text class="video-info-title">{{ item.name }}</text>
          <text class="video-info-artist">{{ item.artistName }}</text>
        </view>
      </cell>
    </NvRoll>
  </view>
</template>

<script>
  import NvRoll from './nv-vertical-roll.vue'
  import YunApi from '../../service/yunApi.js'

  export default {
    components: {
      NvRoll,
    },
    props: {
      windowHeight: {
        default: 0,
      },
      playStatus: {
        default: false,
      },
      actived: {
        default: false,
      },
    },
    watch: {
      actived(val) {
        if (val) {
          this.play()
        } else {
          this.pause()
        }
      },
    },
    data() {
      return {
        playerCur: 0,
        list: [],
        current: 0,
        currentDetail: {}, //当前视频详情
        currentUrl: {}, //当前视频播放地址
      }
    },
    created() {
      this.getList()
    },
    methods: {
      /**
       * 获取mv列表
       */
      async getList() {
        let params = {
          limit: 30,
        }
        let res = await YunApi.topmv(params)
        this.list = res.data.data
        this.playCurrent()
      },
      /**
       * 加载完成时，播放就绪
       * @param {Object} time
       */
      onplay: function (time) {
        console.debug('onplay')
        console.debug('onplay-actived', this.actived)
        if (!this.actived) {
          this.pause()
        }
      },
      onchange: function (index) {
        console.log('nv-video-roll===onchange', index)
        this.current = index
        this.playCurrent()
      },
      /**
       * 播放当前
       */
      async playCurrent() {
        let { current, currentDetail, currentUrl } = this
        let item = this.list[current]
        this.currentDetail = {}
        this.currentUrl = {}

        //歌曲详情,获取分辨率列表
        let res = await YunApi.mvDetail(item.id)
        this.currentDetail = res.data.data

        //获取播放地址
        let resUrl = await YunApi.mvUrl(item.id, this.currentDetail.brs[0].br)
        this.currentUrl = resUrl.data.data
      },
      /**
       * 暂停播放
       */
      pause() {
        let videoContext = uni.createVideoContext('mVideo')
        console.debug(videoContext, '--videoContext')
        videoContext.pause()
      },
      /**
       * 开始播放
       */
      play() {
        let videoContext = uni.createVideoContext('mVideo')
        videoContext.play()
      },
    },
  }
</script>

<style scoped>
  .page-wrapper {
  }

  .bg-image {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.3);
  }

  .list-item {
  }

  .mVideo {
    width: 750rpx;
  }

  .video-box {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    background-color: rgba(0, 0, 0, 0.2);
    align-items: center;
    justify-content: center;
  }

  .video-info-box {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 24rpx;
  }

  .video-info-title {
    margin-bottom: 20rpx;
    font-size: 38rpx;
    font-weight: 600;
    color: #fff;
  }

  .video-info-artist {
    font-size: 32rpx;
    color: #fff;
  }
</style>
